<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

</style>
<title>正在教</title>
</head>
<body>
	<div class="row">
		<div class="span10">
			<div class="tabbable tabs-left">
				<ul id="teachingNames" class="nav nav-tabs"> </ul>
				<div id="tab-content" class="tab-content" style="padding-bottom: 150px;">
					<div id="tab-pane" class="tab-pane active">
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
<script type="text/javascript" src='ui/bootstrap/js/bootstrap-tab.js'></script>
<script type="text/javascript" src='scripts/vendor/Moment.min.js'></script>
<script type="text/javascript" src='scripts/vendor/mustache.js'></script>
<script>



	$(function() {
		$.getJSON("course/json/get-teachings.action", function(data) {
			loadLeftMenu(data);
			
			bindMenu();
			
			var willClick = "#t" + $.URLParams("tId");
			console.log(willClick);
			$(willClick).trigger('click');
			
		});
	});
	
	function loadLeftMenu(courses){
		var items = "";
		items = Mustache.render($("#leftMenuTem").html(), courses);
		$('#teachingNames').html(items);
	}
	
	function whenNoneContent(data){
		var flag = false;
		if([] == data.times || null == data.repeat){
			$('#tab-pane').html("课程还没安排课程表哦。" + '<a href="course/arrangement-course.action?courseId='+ data.courseId +'" class="btn">马上安排</a>');
			flag = true;
		}
		return flag;
	}
	
	function bindMenu(){
		$('#teachingNames > li > a').click(function(){
			$.getJSON($(this).attr('href'), function(data){
				if(whenNoneContent(data)) return;
				var times_boo = new Array();
				$.each(data.times, function(key, val){
					times_boo.push({time : new moment(new Date(val.teachDate)), tid : val.id});
				});
				var r = new repeat();
				$.each(times_boo, function(key, val){
					r.push(val);
				});
				$('#tab-pane').html(Mustache.render($('#repeat_tem').html(), r));
			});
			$('.dropdown-toggle').dropdown()
		});//end click bind
	}
	//发布作业前检测是否已经填写课程内容
	function check_before(tid){
		var url = "course/json/check-before-homework.action?tid="+tid;
			console.log(tid);
		$.getJSON(url, function(json){
			if(json.access){
				window.location.href= 'course/homework-assignment.action?tid=' + tid;
			}else{
				if(confirm("在发布作业前应该填写课程内容! 是否马上填写?")){
					window.location.href='course/fill-in-content.action?timeTableId=' + tid;
				}
			}
		});
	}
	
	
	function yearTemp(preYear){
		return  '<span class="label label-info">' + preYear + '年</span>' + '<p/>';
	}
	
	function dateTemp(month, date, id){
		var alink = '<a style="color:#ffffff;" href="course/fill-in-content.action?timeTableId='+ id +'">'  + (month + 1)+ '-' + date + '</a>';
		return  '<span class="label">' + alink + '</span>'; 
	}

	function Day(time,tid){
		this.num = time.date();
		this.tid = tid;
		return this;
	}

	function Month(time){
		this.num = time.month() + 1;
		this.days = [];
		this.push = function(day){
			this.days.push(day);
			return this;
		};
	};

	function Year(time){
		this.num = time.year();
		this.has = [];
		this.months = [];
		this.push = function(month){
			var month_num = month.num;
			if(-1 == $.inArray(month.num, this.has)){//新的月
				this.has.push(month_num);
				this.months.push(month);
			}else{//已存在的月
				var index ;
				$.each(this.months,function(i,v){
					if(v.num == month_num){
						index = i;
						return;
					}
				});
				var mm = this.months[index];
				if(index != NaN){
					$.each(month.days,function(i, v){
						mm.push(v);
					})
				}
			}
			return this;
		};
	};

	function repeat(){
		this.years = [];
		this.has = [];
		this.push = function(value){
			var y = value.time.year()
			var year = null;
			if(-1 == $.inArray(y, this.has)){
				var dd = new Day(value.time, value.tid);
				var mm = new Month(value.time);
				mm.push(dd);
				year = new Year(value.time);
				year.push(mm);
				this.years.push(year);
				this.has.push(y);
			}else{
				//找到已存在的year
				var index;
				$.each(this.years, function(i,v){
					if(y == v.num){
						index = i;
						return;
					}
				});
				if(index != NaN){
					year = this.years[index];
				}
				if(year != null){
					var mm = new Month(value.time);
					mm.push(new Day(value.time,value.tid));
					year.push(mm);
				}
				
			}
		};
	}

</script>
<script id="leftMenuTem" type="text/template">
{{#courses}}
<li><a id="t{{id}}" href="course/json/get-teaching-dates.action?courseId={{id}}" data-toggle="tab" >{{name}}</a></li>
{{/courses}}
</script>

<script id="repeat_tem" type="text/template">
{{#years}}
<div class="alert alert-info"><h2>{{num}}年</h2></div>

{{#months}}
<div style="margin-top: 18px;" class="btn-toolbar well">
<h1>{{num}}月</h1>
{{#days}}
		<div class="btn-group">
          <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">{{num}} <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="course/fill-in-content.action?timeTableId={{tid}}">填写课程内容</a></li>
            <li><a onclick="check_before({{tid}});" href="javascript:void(0);">发布作业</a></li>
            <li><a href="course/homework-view.action?tid={{tid}}">查看作业情况</a></li>
          </ul>
        </div><!-- end -->
{{/days}}
</div>
{{/months}}
{{/years}}
</script>
    
</body>
</html>